// 定义数据类型
import {ref} from "vue";
import * as echarts from "echarts";

interface BarData {
    name: string
    valueA: number
    valueB: number
    valueC: number
}

// 模拟数据
const chartData: BarData[] = [
    {name: '项目1', valueA: 120, valueB: 80, valueC: 60},
    {name: '项目2', valueA: 200, valueB: 150, valueC: 100},
    {name: '项目3', valueA: 150, valueB: 90, valueC: 70},
    {name: '项目4', valueA: 80, valueB: 60, valueC: 30},
    {name: '项目5', valueA: 70, valueB: 40, valueC: 20}
]

// 图例选中状态
const legendSelected = ref({
    'A类': true,
    'B类': true,
    'C类': true
})


export const barChartOption: echarts.EChartsOption = {
    title: {
        text: 'Echart 条形图示例',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['A类', 'B类', 'C类'],
        selected: legendSelected.value,
        left: 'right'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: chartData.map(item => item.name)
    },
    series: [
        {
            name: 'A类',
            type: 'bar',
            data: chartData.map(item => item.valueA),
            itemStyle: {
                color: '#5470C6'
            },
            emphasis: {
                focus: 'series'
            }
        },
        {
            name: 'B类',
            type: 'bar',
            data: chartData.map(item => item.valueB),
            itemStyle: {
                color: '#91CC75'
            },
            emphasis: {
                focus: 'series'
            }
        },
        {
            name: 'C类',
            type: 'bar',
            data: chartData.map(item => item.valueC),
            itemStyle: {
                color: '#EE6666'
            },
            emphasis: {
                focus: 'series'
            }
        }
    ]
}